<script setup lang="ts">

import {message} from "ant-design-vue";
import {getCurrentInstance} from "vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import {SycmItemMonitor} from "~/contentScripts/views/sycm/item_monitor/SycmItemMonitor";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";

const loading = ref<boolean>(false);
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const showZs = ref<boolean>(false);
const dataSource = ref<Array<any>>([]);
const columns = ref<Array<any>>([
  {
    dataIndex: 'index',
    title: '排名',
    width: 60,
    sorter: (a: any, b: any) => a.index - b.index
  },
  {
    dataIndex: 'item.title',
    title: '商品名称',
    width: 300,
    dataType: 'product',
    sorter: (a: any, b: any) => a.item.title.localeCompare(b.item.title),
    dataField: {
      item_pic: 'item.pictUrl',
      item_url: 'item.detailUrl',
      item_title: 'item.title',
    }
  },
  {
    dataIndex: 'seRivalItmCnt.value',
    title: '搜索竞争商品数',
    sorter: (a: any, b: any) => a.seRivalItmCnt.value - b.seRivalItmCnt.value,
    align: 'right',
  },
  {
    dataIndex: 'seGuideUv.value',
    title: '搜索引导访客数',
    sorter: (a: any, b: any) => a.seGuideUv.value - b.seGuideUv.value,
    align: 'right',
  },
  {
    dataIndex: 'rivalItmAvgSeGuideUv.value',
    title: '竞品平均搜索引导访客数',
    sorter: (a: any, b: any) => a.rivalItmAvgSeGuideUv.value - b.rivalItmAvgSeGuideUv.value,
    align: 'right',
  }
]);

const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    loading.value = true;
    const data = await SycmItemMonitor.getCompetitiveIdentificationSearchAway();
    if (!data) {
      message.error('获取数据失败,请重试！');
      loading.value = false;
      return;
    }
    console.log(data);
    loading.value = false;
    data.data.data.forEach((item: any, index: number) => {
      item.index = index + 1;
    });
    dataSource.value = data.data.data;
    visible.value = true;
  }
}
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle" :loading="loading">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-竞争商品-竞品识别-搜索流失竞品推荐`" width="95%" style="top: 20px;"
                  v-model:open="visible"
    >
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <!--        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>-->
      </template>
      <div style="max-height: calc(100vh - 110px);min-height:750px;overflow-y: auto;">
        <base-table table-name="竞争-竞争商品-竞品识别-搜索流失竞品推荐" :columns="columns" :data-source="dataSource"
                    :scroll="{
        // y:750,
        // x: 2300,
        y:740
      }"
        >
        </base-table>
      </div>

    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
